<template>
  <transition name="fade-up">
    <div class="play-list" v-if="showPlayList" @click="hide">
      <div class="list-wrapper" @click.stop>
        <div class="slider-wrap">
          <slider :autoPlay="false">
            <div>
              <div class="list-header">
                <h1 class="title">
                  <div @click.stop="changeMode">
                    <i class="icon iconfont" v-html="modeIcon"></i>
                    <span class="text">{{modeText}}</span>
                  </div>
                  <div class="clear" @click.stop="showConfirm">
                    <i class="iconfont icon-clear">&#xe64a;</i>
                  </div>
                </h1>
              </div>
              <scroll ref="listContent" class="list-content">
                <transition-group name="play-list" tag="ul">
                  <li
                    :key="item.id"
                    ref="listItem"
                    class="item"
                    v-for="(item, index) in playList"
                    @click="selectItem(item, index)"
                  >
                    <span class="text">{{item.name}}</span>
                    <span @click.stop="deleteItem(item)" class="delete">
                      <i class="icon-delete iconfont">&#xe64a;</i>
                    </span>
                  </li>
                </transition-group>
              </scroll>
              <div class="list-operate">
                <div class="add" @click="addSong">
                  <i class="icon-add iconfont">&#xe61e;</i>
                  <span class="text">添加歌曲到队列</span>
                </div>
              </div>
            </div>
            <div>
              <div class="list-header">
                <h1 class="title">
                  播放记录列表
                </h1>
              </div>
              <scroll class="list-content">
                <div
                  :key="item.id"
                  ref="listItem"
                  class="item"
                  v-for="(item, index) in playHistoryList"
                  @click="selectItem(item, index)"
                >
                  <span class="text">{{item.name}}</span>
                  <span @click.stop="deleteItem(item)" class="delete">
                    <i class="icon-delete iconfont">&#xe64a;</i>
                  </span>
                </div>
              </scroll>
            </div>
          </slider>
        </div>
        <div class="list-close" @click="hide">
          <span>关闭</span>
        </div>
      </div>
      <confirm
        ref="confirm"
        @confirm="confirmClear"
        text="是否清空播放列表"
        confirmBtnText="清空"
      />
    </div>
  </transition>
</template>

<script >
import { mapGetters, mapMutations, mapActions } from 'vuex'
import Slider from 'baseUI/Slider'
import Scroll from 'baseUI/Scroll'
import Confirm from 'baseUI/Confirm'
import { MODE_TEXT, MODE_ICON } from 'utils/constant'

export default {
  name: 'playList',
  components: {
    Slider,
    Scroll,
    Confirm
  },
  data () {
    return {
      showFlag: false,
      refreshDelay: 120
    }
  },
  computed: {
    ...mapGetters([
      'showPlayList',
      'mode',
      'playList',
      'currentSong',
      'playHistoryList'
    ]),
    modeText () {
      return MODE_TEXT[this.mode]
    },
    modeIcon () {
      return MODE_ICON[this.mode]
    }
  },
  methods: {
    ...mapMutations({
      setPlayList: 'SET_SHOW_PLAYLIST',
      setPlayMode: 'SET_PLAY_MODE',
      setCurrentIndex: 'SET_CURRENT_INDEX'
    }),
    ...mapActions([
      'deleteSong'
    ]),
    hide () { // 隐藏播放列表
      this.setPlayList(false)
    },
    changeMode () { // 更改播放模式
      let modeNum = this.mode
      modeNum++
      let mode = modeNum > 2 ? 0 : modeNum
      this.setPlayMode(mode)
    },
    selectItem (item, index) { // 播放当前歌曲
      if (this.mode === 1) {
        index = this.playList.findIndex(song => {
          return song.id === item.id
        })
      }
      this.setCurrentIndex(index)
      this.setPlayingState(true)
    },
    scrollToCurrent (current) {
      const index = this.playList.findIndex(song => {
        return current.id === song.id
      })
      this.$refs.listContent.scrollToElement(this.$refs.listItem[index], 300)
    },
    deleteItem (item) { // 删除列表单个歌曲
      this.deleteSong(item)
      if (!this.playList.length) {
        this.hide()
      }
    },
    addSong () { // 添加歌曲
      console.log('添加歌曲')
    },
    showConfirm () { // 显示弹框
      this.$refs.confirm.show()
    },
    confirmClear () { // 清空列表
      this.hide()
    }
  },
  watch: {
    currentSong (newSong, oldSong) {
      if (!this.showFlag || newSong.id === oldSong.id) {
        return
      }
      this.scrollToCurrent(newSong)
    }
  }
}
</script>

<style scoped lang="less">
@import '~assets/style/variable';
@import '~assets/style/mixin';
.play-list {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 200;
  background-color: rgba(0, 0, 0, .3);
  .list-wrapper {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: var(--bg-color);
    .slider-wrap {
      position: relative;
      width: 100%;
      overflow: hidden;
      margin-bottom: 5px;
      /deep/ .dots {
        bottom: 4px;
        .dot {
          background-color: #ccc;
          &.active {
            background-color: var(--theme-color);
            width: 8px;
          }
        }
      }
    }
    .list-header {
      position: relative;
      padding: 10px 10px;
      border-bottom: 1px solid @border-color;
      .title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .icon {
          margin-right: 8px;
          font-size: 18px;
          color: var(--text-color);
          vertical-align: text-bottom;
        }
        .text {
          flex: 1;
          font-size: @fs-medium;
          color: var(--text-color);
        }
        .clear {
          .extend-click();
          .icon-clear {
            font-size: 18px;
            color: var(--text-color);
          }
        }
      }
    }
    .list-content {
      max-height: 240px;
      overflow: hidden;
      .item {
        display: flex;
        align-items: center;
        height: 40px;
        padding: 0 10px;
        border-bottom: 1px solid @border-color;
        overflow: hidden;
        text-align: left;
        .text {
          flex: 1;
          .no-wrap();
          font-size: @fs-medium;
          color: var(--text-color);
        }
        .delete {
          .extend-click();
          font-size: @fs-small;
          color: var(--text-color);
        }
      }
    }
    .list-operate {
      // position: absolute;
      // bottom: 0;
      // left: 50%;
      // transform: translateX(-50%);
      margin: 10px auto 20px;
      width: 140px;
      .add {
        display: flex;
        align-items: center;
        padding: 8px 16px;
        border: 1px solid @border-color;
        border-radius: 100px;
        color: var(--text-color);
        .icon-add {
          margin-right: 5px;
          font-size: @fs-small-s;
        }
        .text {
          font-size: @fs-small;
        }
      }
    }
    .list-close {
      text-align: center;
      height: 40px;
      line-height: 40px;
      border-top: 1px solid @border-color;
      background: var(--bg-color);
      font-size: @fs-medium;
      color: var(--text-color);
    }
  }
}
</style>
